<template>
	<view class="container">
		<!-- <uni-search-bar  placeholder="搜索我的订单" @input="input" :bgColor="FFFFF" :radius="30"></uni-search-bar> -->
		<tui-tabs :tabs="tabs" :isFixed="scrollTop >= 100" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19" @change="change" itemWidth="20%"></tui-tabs>
		<!--选项卡逻辑自己实现即可，此处未做处理-->
		<view :class="{ 'tui-order-list': scrollTop >= 100 }">
			<view class="tui-order-item" v-for="model in searchData" :key="model.id" @click="detail(model.id)">
				<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						<view>{{ `订单号：${model.orderSn}` }}</view>
						<template>
							<view v-if="model.orderStatus == 0" class="tui-order-status">待分配</view>
							<view v-else-if="model.orderStatus == 1" class="tui-order-status">已分配</view>
							<view v-else-if="model.orderStatus == 10" class="tui-order-status">已完成</view>
							<view v-else-if="model.orderStatus == -1" class="tui-order-status">已取消</view>
							<view v-else-if="model.orderStatus == -2" class="tui-order-status">退款</view>
							<view v-else-if="model.orderStatus == -3" class="tui-order-status">退货退款</view>
							<view v-else-if="model.orderStatus == -5" class="tui-order-status">已删除</view>
						</template>
					</view>
				</tui-list-cell>
				<block v-for="(item, index) in model.orderGoodsList" :key="item.id">
					<tui-list-cell padding="0">
						<view class="tui-goods-item">
							<image :src="item.imageUrl" class="tui-goods-img"></image>
							<view class="tui-goods-center">
								<view class="tui-goods-name">{{ item.goodsName }}</view>
								<view v-if="item.attribute" class="tui-goods-attr">{{ item.attribute }}</view>
							</view>
							<view class="tui-price-right">
								<view>￥{{ item.marketPrice }}元{{item.goodsUnit?'/'+item.goodsUnit:''}}</view>
								<view>x{{ item.number }}</view>
							</view>
						</view>
					</tui-list-cell>
				</block>
				<tui-list-cell :hover="false" v-if="(model.freightPrice && model.freightPrice>0) ">
					<view class="tui-goods-price">
						<view>运费：</view>
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{model.freightPrice}}元</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" unlined>
					<view class="tui-goods-price">
						<view>共{{ model.goodsCount }}件商品 合计：</view>
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{ model.orderPrice }}元</view>
					</view>
				</tui-list-cell>
				<view class="tui-order-btn">
					<!-- <view class="tui-btn-ml"><tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle">查看发票</tui-button></view> -->
					<!-- <view class="tui-btn-ml"><tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle">评价晒单</tui-button></view> -->
					<view class="tui-btn-ml" v-if="model.payStatus == 0 && (model.orderStatus == 0 || model.orderStatus == 1)" @tap.stop="cancelOrders(model.id)">
						<tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle">取消订单</tui-button>
					</view>
					<view class="tui-btn-ml" v-if="model.payStatus == 0 && model.orderStatus >= 0" @click.stop="btnPay(model.id)">
						<tui-button type="danger" plain width="152rpx" height="56rpx" :size="26" shape="circle">立即支付</tui-button>
					</view>
					<!-- 确认收货 -->
					<view class="tui-btn-ml" v-if="model.payStatus == 2 && model.orderStatus == 1 && model.shippingStatus==1" @tap.stop="confirmOrders(model.id)">
						<tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle">确认收货</tui-button>
					</view>
					<!-- 申请退款 -->
					<!-- <view class="tui-btn-ml" v-if="model.payStatus == 2 && model.orderStatus == 1 && model.shippingStatus==0" @tap.stop="refund(model.id)">
						<tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle">申请退款</tui-button>
					</view> -->
				</view>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f1f8fa"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
import { handleWXPay } from '@/utils';
import { mapActions,mapGetters} from 'vuex';
import tuiTabs from '@/components/tui-tabs/tui-tabs.vue';
import tuiButton from '@/components/tui-button/tui-button.vue';
import tuiNomore from '@/components/tui-nomore/tui-nomore.vue';
import tuiLoadmore from '@/components/tui-loadmore/tui-loadmore.vue';
import tuiListCell from '@/components/tui-list-cell/tui-list-cell.vue';
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
export default {
	components: { tuiTabs, tuiListCell, tuiButton, tuiNomore, tuiLoadmore , uniSearchBar },
	data() {
		return {
			tabs: [{ name: '待付款' }, { name: '待发货' }, { name: '待收货' }, { name: '已取消' }, { name: '已完成' }],
			currentTab: 0,
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,
			scrollTop: 0,
			page: 1,
			size: 10,
			order: [],
			search:''
		};
	},
	onShow() {
		this.currentTab = this.$store.state.order.my_order_active;
		this.getOrderList();
	},
	computed:{
		...mapGetters(['myOrderActive'])
	},
	methods: {
		...mapActions(['orderList', 'listOrderShip', 'listOrderUnpay', 'cancelOrder', 'prepay','confirmOrder','payRefund']),
		input(e){
			this.search = e.value;
		},
		change(e) {
			this.page = 1;
			this.size = 10;
			this.currentTab = e.index;
			this.getOrderList();
		},
		detail(id) {
			uni.navigateTo({
				url: `/pages/orderDetail/orderDetail?orderId=${id}`
			});
		},
		 getOrderList() {
			uni.showLoading({ mask: true });
			switch (this.currentTab) {
				case 0:
					this.listOrderUnpay({ page: this.page, size: this.size }).then(res => {
						if (this.page != 1) {
							this.order = this.order.concat(res.data.records || []);
						} else {
							this.order = res.data.records;
						}
						this.loadding = false;
						if (this.size * this.page > res.data.total) {
							this.pullUpOn = false;
						}
						uni.stopPullDownRefresh();
						uni.hideLoading();
					});
					break;
				case 1:
					this.listOrderShip({ page: this.page, size: this.size, ship: 0 }).then(res => {
						if (this.page != 1) {
							this.order = this.order.concat(res.data.records || []);
						} else {
							this.order = res.data.records;
						}
						uni.stopPullDownRefresh();
						this.loadding = false;
						if (this.size * this.page > res.data.total) {
							this.pullUpOn = false;
						}
						uni.hideLoading();
					});
					break;
				case 2:
					this.listOrderShip({ page: this.page, size: this.size, ship: 1 }).then(res => {
						if (this.page != 1) {
							this.order = this.order.concat(res.data.records || []);
						} else {
							this.order = res.data.records;
						}
						uni.stopPullDownRefresh();
						this.loadding = false;
						if (this.size * this.page > res.data.total) {
							this.pullUpOn = false;
						}
						uni.hideLoading();
					});
					break;
				case 3:
						this.orderList({ page: this.page, size: this.size,status:-10}).then(res => {
							if (this.page != 1) {
								this.order = this.order.concat(res.data.records || []);
							} else {
								this.order = res.data.records;
							}
							uni.stopPullDownRefresh();
							this.loadding = false;
							if (this.size * this.page > res.data.total) {
								this.pullUpOn = false;
							}
							console.log(this.order);
							uni.hideLoading();
						});
						break;
					case 4:
								this.orderList({ page: this.page, size: this.size,status:10}).then(res => {
									if (this.page != 1) {
										this.order = this.order.concat(res.data.records || []);
									} else {
										this.order = res.data.records;
									}
									uni.stopPullDownRefresh();
									this.loadding = false;
									if (this.size * this.page > res.data.total) {
										this.pullUpOn = false;
									}
									console.log(this.order);
									uni.hideLoading();
								});
								break;
			}
		}, 
		confirmOrders(id){
			uni.showLoading({
				mask:true
			})
			this.confirmOrder({
				orderId:id
			}).then(res=>{
				console.log('res',res)
				uni.hideLoading();
				if(res.code == 0){
					uni.showToast({
						title:'确认成功',
						icon:'success',
						duration:1500,
						success:()=>{
							setTimeout(()=>{
								this.page = 1;
								this.size = 10;
								this.getOrderList();
							},1500)
						}
					})
				}
			})
		},
		cancelOrders(id) {
			uni
				.showModal({
					title: '提示',
					content: '确定要取消订单吗?'
				})
				.then(([err, suc]) => {
					if (suc.confirm) {
						this.cancelOrder({
							orderId: id
						}).then(res => {
							uni.showToast({
								title:'确认成功',
								icon:'success',
								duration:1500,
								success:()=>{
									setTimeout(()=>{
										this.page = 1;
										this.size = 10;
										this.getOrderList();
									},1500)
								}
							})
						});
					}
				});
		},
		refund(id){
			uni
				.showModal({
					title: '提示',
					content: '确定要退款吗?'
				})
				.then(([err, suc]) => {
					if (suc.confirm) {
						this.payRefund({
							orderId: id
						}).then(res => {
							uni.showToast({
								title:'确认成功',
								icon:'success',
								duration:1500,
								success:()=>{
									setTimeout(()=>{
										this.page = 1;
										this.size = 10;
										this.getOrderList();
									},1500)
								}
							})
						});
					}
				});
		},
		btnPay(id) {
			this.prepay({ orderId: id }).then(order => {
				handleWXPay(order.data).then(payRes => {
					if (payRes.errMsg == 'requestPayment:ok') {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 1000
						});
					} else {
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							mask: true,
							duration: 1000
						});
					}
					setTimeout(() => {
						this.page = 1;
						this.getOrderList();
					}, 1000);
				});
			});
		},
		},
	computed:{
		searchData(){
			if(this.search!=''){
				let result  = this.order.filter(item=>{
					if(item.orderGoodsList.length !=0){
						let index = item.orderGoodsList.findIndex(orderGood=>{
							return orderGood.goodsName.indexOf(this.search) !=-1 ;
						})
						return index != -1;
					}				
				})
				console.log('result',result);
				return result;
			}else{
				return this.order;
			}
		}
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getOrderList();
	},
	onReachBottom() {
		//只是测试效果，逻辑以实际数据为准
		if (this.pullUpOn) {
			this.page += 1;
			this.loadding = true;
			this.getOrderList();
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style>
.container {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-order-list {
	margin-top: 80rpx;
}

.tui-order-item {
	margin-top: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.tui-goods-title {
	width: 100%;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-order-status {
	color: #888;
	font-size: 26rpx;
}

.tui-goods-item {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.tui-goods-img {
	width: 180rpx;
	height: 180rpx;
	background:url(../../static/images/menu/default-memu-pic.png) no-repeat;
	background-size:180rpx 180rpx;
	display: block;
	flex-shrink: 0;
}

.tui-goods-center {
	flex: 1;
	padding: 20rpx 8rpx;
	box-sizing: border-box;
}

.tui-goods-name {
	max-width: 310rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	line-height: 32rpx;
}

.tui-goods-attr {
	font-size: 22rpx;
	color: #888888;
	line-height: 32rpx;
	padding-top: 20rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-price-right {
	text-align: right;
	font-size: 24rpx;
	color: #888888;
	line-height: 30rpx;
	padding-top: 20rpx;
}

.tui-color-red {
	color: #e41f19;
	padding-right: 30rpx;
}

.tui-goods-price {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: 24rpx;
}

.tui-size-24 {
	font-size: 24rpx;
	line-height: 24rpx;
}

.tui-price-large {
	font-size: 32rpx;
	line-height: 30rpx;
	font-weight: 500;
}

.tui-order-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: #fff;
	padding: 10rpx 30rpx 20rpx;
	box-sizing: border-box;
}

.tui-btn-ml {
	margin-left: 20rpx;
}
</style>
